<template>
  <div class='list'>
    <p v-show="getListData.length">{{selectIndex==0?"*仅限新用户参与":"*新老用户均可参与"}}</p>
    <ul>
      <li v-for="(item,index) in getListData">
        <img :src="item.img" alt="">
        <p>{{item.title}}</p>
        <p class="pr">
          <span class="price">￥{{item.price}}</span>
          <span class="cost">￥{{item.cost}}</span>
          <span class="group pa">{{item.group}}人团</span>
          <span v-for="(btn,index1) in getButtonData" class="fr btn" @click="clickThis(btn,item)">{{btn.label}}</span>
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:["selectIndex","listData","buttonData"],
  components: {},
  name: "",
  data() {
    return {

    };
  },
  computed:{
    getListData(){
      
      return this.listData||[]
    },
    getButtonData(){
      return this.buttonData||[]
    }
  },
  methods: {
    clickThis(btn,item){

      btn.click(btn,item)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  
  >p{
    margin: 5px 15px;
    font-size: 12px;
    color: #999;
  }

  ul{

    li{
        display: inline-block;
        height: 100%;
        margin: 15px;
        margin-top: 0;
        padding-bottom: 10px;
        box-sizing: border-box;
        border: 1px solid #f2f2f2;
        
      p{
          margin-top: 8px;
          font-size: 14px;
          color: #666;
          text-indent: 15px;

          .price{
            font-size: 24px;
            color: #F62A2A
          }
          .cost{
            color: #999;
            text-decoration: line-through;
          }
          .group{
            background-color:#ffba52;
            text-align: center;
            font-size: 12px;
            text-indent: 0;
            color: #fff;
            padding: 0 5px;
            border-radius: 2px;
          }

          .btn{
            text-indent: 0;
            margin-right: 10px;
            color: #fff;
            background: linear-gradient(left bottom,#FF6613,#FFA200);
            background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
            width: 60px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            font-size: 12px;
            border-radius: 4px;
          }
          .btn:active{
            opacity: .6;
          }
        }

      img{
        width: 100%;
        min-height: 150px;

      }
    }
  }
}
</style>
